<template>
  <layout-page :ifBaike="true">
    <template v-slot:menu>
      <el-menu :default-active="0">
        <el-scrollbar height="100%;">
          <el-menu-item
            v-for="(item, index) in nav"
            :key="index"
            :index="index"
          >
            <span>{{ item }}</span>
          </el-menu-item>
        </el-scrollbar>
      </el-menu>
    </template>
    <template v-slot:card>
      <el-card class="card">
        <template #header>
          <div class="card-header">
            <strong class="analyse-head">矮柳</strong>
          </div>
        </template>
        <el-scrollbar height="100%;">
          <p>
            &nbsp;&nbsp;&nbsp;它的身高仅有3厘米～5厘米。与世界之最的杏仁桉比起来，一高一矮相关达1.5万倍。矮柳之矮，让人叹为观止。这种植物的茎一般匍匐在地面上，发芽抽枝后可以长出像杨柳一样的花序，然而虽同称为柳，但高矮实在差得太多。矮柳之所以矮，主要是受制于恶劣气候环境，矮柳生长在高山地带，那里的温度极低，空气稀薄，大风强劲，阳光直射，植株的身材必须矮小，才能适应这种环境。
          </p>
        </el-scrollbar>
      </el-card>
    </template>
  </layout-page>
</template>

<script>
import LayoutPage from '../components/layoutPage.vue'
export default {
  name: 'Research',
  components: { LayoutPage },
  data () {
    return {
      nav: [
        "最矮的树",
        "最能储水的植物",
        "最强吸水能力的植物",
        "最轻的树木",
        "最毒的植物",
        "最粗的植物",
        "最长寿的树",
        "最耐干旱的植物",
        "最长的植物",
        "最高的植物"
      ]
    }
  },
  methods: {
    gotoSearch () {
      this.$router.push('./search');
    }
  }
}
</script>
<style scoped>
/* .research {
  width: 100%;
  height: 81%;
} */

.card {
  height: 100%;
}
.analyse-head {
  border-left: 4px #56ab2f solid;
  padding-left: 10px;
}
.el-menu-item.is-active {
  color: #fff;
  background-color: #95d475;
}
</style>